<script>
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user.js";
import { useRouter, useRoute } from "vue-router";
import { getProblemList, checkAnswersEdit } from "@/api/user.js";
import { getPluginDown } from "@/api/file.js";

export default defineComponent({
  setup() {
    const state = reactive({
      loginInfo: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      styles: {
        boundHeight: 0,
        boundTop: 0,
      },
      isShowSafe: false,
      problemList: [],
      safeForm: {
        safetyProblem1: "",
        safetyProblem2: "",
        answer1: "",
        answer2: "",
        userName: "",
      },
      passForm: {
        password: "",
        repassword: "",
      },
    });

    const loginForm = ref(null);

    const router = useRouter();

    const route = useRoute();

    const store = useUserStore();

    const safeRules = {
      answer1: [
        {
          required: true,
          message: "请输入答案1",
          trigger: "blur",
        },
      ],
      safetyProblem1: [
        {
          required: true,
          message: "请输入安全问题1",
          trigger: "blur",
        },
      ],
      safetyProblem2: [
        {
          required: true,
          message: "请输入安全问题2",
          trigger: "blur",
        },
      ],
      answer2: [
        {
          required: true,
          message: "请输入答案2",
          trigger: "blur",
        },
      ],
      userName: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    };

    const safeElForm = ref(null);

    //登录
    const userLogin = () => {
      loginForm.value.validate((valid) => {
        if (valid) {
          store.userlogin(state.loginInfo).then(
            (info) => {
              if (info.code === 200) {
                router.push({ path: route.query.redirect || "/" });
              } else {
                ElMessage({
                  message: info.message,
                  type: "warning",
                });
              }
            },
            (err) => {
              ElMessage({
                message: err.message,
                type: "warning",
              });
            }
          );
        } else {
          return false;
        }
      });
    };

    const initStyles = () => {
      state.styles.boundHeight = (599 / 1081) * document.body.clientHeight;
      state.styles.boundTop = (235 / 1081) * document.body.clientHeight;
    };

    onMounted(() => {
      initStyles();
      // 811*599
      getProList();
    });

    const showSafe = () => {
      state.isShowSafe = true;
    };

    const closeShow = () => {
      state.isShowSafe = false;
    };
    const saveSafe = () => {
      // state.isShowSafe = false;

      safeElForm.value.validate((valid) => {
        if (valid) {
          if (
            state.passForm.password == "" ||
            state.passForm.repassword == ""
          ) {
            ElMessage({
              message: "请输入密码和确认密码",
              type: "warning",
              offset: 500,
            });
            return;
          } else if (state.passForm.password !== state.passForm.repassword) {
            ElMessage({
              message: "密码和确认密码请输入一致",
              type: "warning",
              offset: 500,
            });
            return;
          }

          let data = {
            answer1: state.safeForm.answer1,
            answer2: state.safeForm.answer2,
            password: state.passForm.password,
            userName: state.safeForm.userName,
          };
          checkAnswersEdit(data).then(
            (res) => {
              if (res.code === 200) {
                ElMessage({
                  message: "修改成功",
                  type: "success",
                  offset: 400,
                });
              } else {
                ElMessage({
                  message: res.message,
                  type: "warning",
                });
              }
            },
            (err) => {
              ElMessage({
                message: err.message,
                type: "warning",
              });
            }
          );
        } else {
          return false;
        }

        state.isShowSafe = false;
      });
    };

    //获取用户安全问题列表
    const getProList = () => {
      getProblemList().then(
        (res) => {
          if (res.code === 200) {
            state.problemList = res.data.problems;
            state.problemList.forEach((item) => {
              if (item.id !== null) {
                item.id = +item.id;
              }
            });
          } else {
            ElMessage({
              message: res.message,
              type: "warning",
            });
          }
        },
        (err) => {
          ElMessage({
            message: err.message,
            type: "warning",
          });
        }
      );
    };

    //插件下载
    const downPlugin = async () => {
      await getPluginDown().then((res) => {
        let url = window.URL.createObjectURL(new Blob([res]));
        let a = document.createElement("a");
        a.style.display = "none";
        a.href = url;
        let title = "setup.exe";
        a.setAttribute("download", title);

        document.body.appendChild(a);
        a.click(); //执行下载
        window.URL.revokeObjectURL(a.href); // 清除url
        document.body.removeChild(a); //移除dom
      });
    };

    return {
      ...toRefs(state),
      userLogin,
      loginForm,
      showSafe,
      closeShow,
      saveSafe,
      getProList,
      safeRules,
      safeElForm,
      downPlugin,
    };
  },
});
</script>

<template>
  <div class="loginContainer">
    <div class="logo"></div>
    <div
      class="loginBox"
      :style="{
        height: styles.boundHeight + 'px',
        top: styles.boundTop + 'px',
      }"
    >
      <div class="topTitle">Welcome!</div>
      <div class="form">
        <el-form
          ref="loginForm"
          :rules="rules"
          :label-position="'top'"
          label-width="440px"
          :model="loginInfo"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginInfo.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              @keyup.enter="userLogin"
              v-model="loginInfo.password"
              type="password"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="others">
        <span @click="showSafe">忘记密码</span>
        <!-- <span @click="downPlugin">插件下载</span> -->
      </div>

      <div class="button" @click="userLogin">登录</div>
    </div>

    <el-dialog
      class="dialog"
      v-model="isShowSafe"
      title="安全问题"
      width="500"
      :before-close="closeShow"
    >
      <div class="showBox">
        <div class="safe">
          <el-form
            :model="safeForm"
            label-width="auto"
            :rules="safeRules"
            ref="safeElForm"
          >
            <el-form-item label="用户名:" prop="userName">
              <el-input v-model="safeForm.userName" />
            </el-form-item>

            <el-form-item label="安全问题1:" prop="safetyProblem1">
              <el-select
                v-model="safeForm.safetyProblem1"
                placeholder="请选择问题"
              >
                <el-option
                  class="selectType"
                  v-for="item in problemList"
                  :key="item.id"
                  size="mini"
                  :label="item.problem"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="答案1:" prop="answer1">
              <el-input v-model="safeForm.answer1" />
            </el-form-item>

            <el-form-item label="安全问题2:" prop="safetyProblem2">
              <el-select
                v-model="safeForm.safetyProblem2"
                placeholder="请选择问题"
              >
                <el-option
                  class="selectType"
                  v-for="item in problemList"
                  :key="item.id"
                  size="mini"
                  :label="item.problem"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="答案2:" prop="answer2">
              <el-input v-model="safeForm.answer2" />
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="key">
          <div class="export">导出秘钥</div>
          <div class="tips">
            导入秘钥(从选定位置导入秘钥验证正确后进入设置新密码)
          </div>
          <div class="import">
            <el-input v-model="input" style="width: 320px" />
            <div class="iconBox">
              <span class="icon"></span>
            </div>
          </div>
        </div> -->
        <div class="pass">
          <el-form
            :model="passForm"
            label-width="auto"
            style="max-width: 600px"
          >
            <el-form-item label="新密码">
              <el-input type="password" v-model="passForm.password" />
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input type="password" v-model="passForm.repassword" />
            </el-form-item>
          </el-form>
        </div>
        <div class="btn"></div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="saveSafe"> 提交 </el-button>
          <el-button type="danger" @click="closeShow">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.loginContainer {
  height: 100%;
  background-image: url("@/assets/loginBack.png");
  background-size: 100% 100%;
  position: relative;

  .logo {
    background-image: url("@/assets/logo.png");
    background-repeat: no-repeat;
    width: 200px;
    height: 60px;
    position: absolute;
    left: 50px;
    top: 30px;
  }

  .loginBox {
    position: absolute;
    width: 550px;
    height: 600px;
    background-color: white;
    right: 100px;
    top: 240px;
    padding: 20px 60px;
    .topTitle {
      font-size: 50px;
      margin-bottom: 30px;
    }
    .form {
      font-size: 16px;
      color: #c2a696;
      .title {
        margin-bottom: 5px;
      }
      .username {
        margin-bottom: 30px;
      }

      .el-input {
        height: 50px;
        border-radius: 10px;
        border: 0;
      }
      .el-input__wrapper {
        border-radius: 10px;
        border: 0;
        background-color: #f8f8fc;
      }
      .el-input__inner {
        border-radius: 10px;
        border: 0;
        font-size: 18px;
      }
    }
    .others {
      margin-top: 20px;
      span {
        color: #33333b;
        margin-right: 25px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        &:hover {
          color: rgb(86, 149, 243);
        }
      }
    }
    .button {
      width: 210px;
      height: 50px;
      background-color: #fe6266;
      color: white;
      font-size: 24px;
      text-align: center;
      line-height: 50px;
      margin: 30px auto;
      cursor: pointer;
    }
  }

  .dialog {
    .showBox {
      .safe {
        width: 300px;
        margin: 0 auto;
      }

      .key {
        margin-top: 30px;
        .export {
          width: 150px;
          height: 30px;
          border: 1px solid black;
          text-align: center;
          line-height: 30px;
          margin: 0 auto;
        }
        .tips {
          width: 380px;
          margin: 10px auto 0;
        }
        .import {
          width: 380px;
          margin: 0 auto;
          display: flex;

          .iconBox {
            margin-left: 10px;
            width: 48px;
            height: 38px;
            border: 1px solid black;
            padding: 3px;
            .icon {
              width: 30px;
              height: 30px;
              display: inline-block;
              background-image: url("../assets/components/import.png");
              background-repeat: no-repeat;
              margin: 5px;
            }
          }
        }
      }

      .pass {
        width: 350px;
        margin: 10px auto;
      }
    }
  }
}
</style>
